:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --bg: #ffffff;
  --muted: #f7f9fd;
  --border: #e6eaf2;
  --text: #0f172a;
  --sub: #475569;
  --primary: #2b6cff;
  --primary-weak: #e6efff;
  --danger: #ef4444;

  /* 固定底栏高度（含内边距），按需微调 */
  --footer-h: 56px;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

*{ box-sizing: border-box; }
html, body, #app{
  height:100%;
  margin:0;
  /* 关键：禁止 body 产生滚动条，滚动由内部列自行承担 */
  overflow:hidden;
}
body{ background: var(--bg); color: var(--text); font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }


/* Tag 样式 */
.tags{
  display:grid; grid-template-columns: repeat(8, 1fr); gap:8px; width:100%;flex: 0 0 auto;
}
.tag{
  text-align:center; padding:10px 8px; border-radius:10px; background:#fff; border:1px solid var(--border);
  font-size:14px; user-select:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tag.active{ background: var(--primary-weak); border-color: var(--primary); color: var(--primary); font-weight:600; }

/* 左侧模型选择卡片 */
.card{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px;
}
.model-item{
  border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:10px;
  cursor:pointer; transition: all .15s ease;
}
.model-item:hover{ border-color:#cfd7e6; transform: translateY(-1px); }
.model-item.active{ border-color: var(--primary); background: var(--primary-weak); }

/* 右侧聊天容器 */
.chat-wrap{
  display:grid; grid-template-rows: auto 1fr auto; gap:10px;
}
.history{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px;
}
.chat{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; overflow:auto;
}
.input-bar{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; gap:8px;
}
.input-bar textarea{
  flex:1; min-height:44px; max-height:160px; resize:vertical; border:1px solid var(--border);
  border-radius:10px; padding:10px; font-size:14px; outline:none;
}
.btn{ padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; }
.btn.primary{ background: var(--primary); color:#fff; border-color: var(--primary); }
.btn.ghost{ background:#fff; }
.btn.danger{ border-color: var(--danger); color:#fff; background: var(--danger); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* 消息 */
.msg{
  margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed var(--border);
}
.msg .role{ font-weight:600; font-size:13px; color: var(--sub); margin-bottom:6px; }
.msg .content{ font-size:15px; line-height:1.6; }

/* 小屏优化 */
@media (max-width: 900px){
  .main{ grid-template-columns: 1fr; }
  .tags{ grid-template-columns: repeat(4, 1fr); }
}